<template>
  <div class="goodCart">
    <!-- 弹出盒子 -->
    <div :class="{delect_box:true,show:ifShow}">
      <div class="delect_con">
        <div class="dele_top">确定要删除该商品吗?</div>
        <div class="dele_bottom">
          <p class="db_left" @click="cancel">取消</p>
          <p class="db_right" @click="Sure">确定</p>
        </div>
      </div>
    </div>
    <!-- 商品盒子 -->
    <div class="goods-big" v-for="(item,index) in carts" v-show="carts.length!==0" :key="item.ID">
      <div class="goodBox">
        <img @click="checkout(index)" class="checkout" :src="item.isFlag ? imgs.yes : imgs.no" />
        <div class="goodRight">
          <div class="goodifo">
            <img :src="item.img_url" alt />
            <p class="goodnew">
              <span class="item_na">{{item.Name}}</span>
              <span class>{{item.Gram}}</span>
              <span class>￥{{item.CurrentPrice}}.00</span>
            </p>
          </div>
          <van-stepper
            v-model="item.count"
            @minus="minus(item.ID,index)"
            @plus="plus(item.ID,index)"
            ref="refNum"
          />
        </div>
      </div>
      <p class="goodyh">
        <span>优惠方式</span>
        <span>不参与活动</span>
      </p>
    </div>
    <div class="nulBox" v-show="carts.length===0">购物车是空的哦~</div>

    <!-- 热卖推荐盒子 -->
    <div class="hot_title">
      <p>Hot Recommend</p>
      <p>热销新品推荐</p>
    </div>
    <div class="hot_box">
      <div>
        <p class="hot_img">
          <img :src="imgs.sq" alt />
        </p>
        <p>伴手礼系列-吉致生巧</p>
        <p class="hot_plice">
          <span>168.00/1盒</span>
          <span class="cartImg">
            <img :src="imgs.gwc" alt />
          </span>
        </p>
      </div>
      <div>
        <p class="hot_img">
          <img :src="imgs.nzt" alt />
        </p>
        <p>伴手礼系列-吉致牛轧糖</p>
        <p class="hot_plice">
          <span>68.00/16粒盒</span>
          <span class="cartImg">
            <img :src="imgs.gwc" alt />
          </span>
        </p>
      </div>
    </div>
    <div class="hot_box">
      <div>
        <p class="hot_img">
          <img :src="imgs.pf" alt />
        </p>
        <p>伴手礼系列-吉致泡芙</p>
        <p class="hot_plice">
          <span>88.00/1盒</span>
          <span class="cartImg">
            <img :src="imgs.gwc" alt />
          </span>
        </p>
      </div>
      <div></div>
    </div>
    <div class="checkbox">
      <div class="check_left">
        <img @click="checkedAll()" class="checkout" :src="$store.state.isAll ? imgs.yes : imgs.no" />
        全选
        <a href="javascript:void(0)" @click="remove()">删除</a>
      </div>
      <div class="chexk_right">
        <div class="cher-l">
          <p>
            合计:
            <span class="chesum">￥{{$store.getters.getAllPlic.plice}}</span>
          </p>
          <p>
            已优惠:
            <span class="cheyh">00.00</span>
          </p>
        </div>
        <button @click="sendCat">结算</button>
      </div>
    </div>
  </div>
</template>

<script>
const yes = require('../../assets/mw_firm_duihao_1.jpg')
const no = require('../../assets/mw_firm_duihao_2.jpg')

const sq = require('../../assets/mw_firm_sq.jpg')
const nzt = require('../../assets/mw_firm_nzt_v1.jpg')
const pf = require('../../assets/mw_firm_pf_v1.jpg')
const gwc = require('../../assets/mw_firm_gwc.jpg')
export default {
  data: () => ({
    checke: false,
    value: 0,
    imgs: {
      yes,
      no,
      sq,
      nzt,
      pf,
      gwc
    },
    ifShow: true,
    checkedall: true,
    carts: null
  }),
  methods: {
    // 全选
    checkedAll() {
      this.checkedall = !this.checkedall
      this.$store.commit('checkedAll', this.checkedall)
    },
    // 单选
    checkout(index) {
      this.$store.commit('checke', index)
    },
    // 数量加
    plus(id, index) {
      const value = this.$refs.refNum[index].currentValue
      var arr = this.carts
      arr.some(el => {
        if (el.ID === id) {
          el.count = value
          return true
        }
      })
      localStorage.setItem('cart', JSON.stringify(arr))
    },
    // 数量减
    minus(id, index) {
      const value = this.$refs.refNum[index].currentValue
      var arr = this.carts
      arr.some(el => {
        if (el.id === id) {
          el.count = value
          return true
        }
      })
      localStorage.setItem('cart', JSON.stringify(arr))
    },
    // 弹框函数
    remove() {
      let deleNum = 0
      this.carts.forEach(el => {
        if (el.isFlag === false) {
          deleNum++
        }
      })
      if (deleNum === this.carts.length) {
        return
      }
      this.ifShow = !this.ifShow
    },
    // 取消删除函数函数
    cancel() {
      this.ifShow = true
    },
    // 确定删除函数
    Sure() {
      var newAll = []
      let arr = this.carts
      arr.forEach((el, index) => {
        if (el.isFlag === false) {
          newAll.push(el)
        }
      })
      localStorage.setItem('cart', JSON.stringify(newAll))
      this.$store.state.cart = newAll
      this.getCats()
      this.enterAll()
      this.ifShow = true
    },
    getCats() {
      this.$store.state.cart = JSON.parse(localStorage.getItem('cart') || '[]')
      this.carts = this.$store.state.cart
    },
    // 数据更新时控制全选
    enterAll() {
      let num = 0
      this.carts.forEach(el => {
        if (el.isFlag === true) {
          num++
        }
      })
      this.$store.state.isAll = Boolean(num)
    },
    // 判断是否登录
    islogin() {
      const user = JSON.parse(localStorage.getItem('user') || '[]')
      if (user.length === 0) {
        this.$dialog
          .alert({
            title: '您还没有登录,需要先登录哦~'
          })
          .then(() => {
            this.$router.push('/usermy')
          })
      }
    },
    // 发送订单
    sendCat() {
      if (this.carts.length === 0) {
        this.$Toast('您的购物车是空的哦~')
        return
      }
      // 原来的数据
      const arr = JSON.parse(localStorage.getItem('sendCat') || '[]')
      // 新的数据
      const sendArr = []
      const newArr = []
      this.carts.forEach(el => {
        if (el.isFlag === true) {
          sendArr.push(el)
        } else {
          newArr.push(el)
        }
      })
      var enterArr = sendArr.concat(arr)
      localStorage.setItem('sendCat', JSON.stringify(enterArr))
      localStorage.setItem('cart', JSON.stringify(newArr))
      this.$store.state.cart = JSON.parse(localStorage.getItem('cart') || '[]')
      this.$store.state.sendCat = JSON.parse(localStorage.getItem('sendCat') || '[]')
      this.getCats()
      this.$dialog
        .confirm({
          title: '订单已生成,是否立即前往订单页呐~'
        })
        .then(() => {
          this.$router.push('/usermy/order')
        })
        .catch(() => {})
    }
  },
  components: {},
  created() {
    this.getCats()
    this.enterAll()
    this.islogin()
  }
}
</script>

<style lang="less" scoped>
.goodCart {
  background: #f7f7f7;
  padding-bottom: 100px;
  position: relative;

  .nulBox {
    height: 58px;
    background: #fff;
    text-align: center;
    line-height: 58px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 100px;
  }
  .delect_box {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(000, 000, 000, 0.6);
    z-index: 999;
  }
  .delect_con {
    width: 278px;
    height: 154px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9999;
    transform: translate(-50%, -50%);
    border-radius: 3px;
    .dele_top {
      height: 120px;
      line-height: 120px;
      text-align: center;
      font-size: 16px;
      color: #333;
    }
    .dele_bottom {
      display: flex;
      justify-content: space-between;
      p {
        flex: 1;
        text-align: center;
        font-size: 16px;
      }
      .db_left {
        color: #999;
        border-right: 1px solid #999;
      }
      .db_right {
        color: #02d3d6;
      }
    }
  }
  p {
    padding: 0;
    margin: 0;
  }
  .goods-big {
    background: #fff;
    padding: 10px 0 10px 10px;
    margin-bottom: 20px;
    .goodBox {
      background: #fff;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .item_na {
        width: 100px;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .van-card {
        background: #fff;
      }
      .checkout {
        width: 20px;
        margin-right: 20px;
      }
      .goodRight {
        height: 118px;
        flex: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-bottom: 1px solid #ccc;
        .goodifo {
          display: flex;

          img {
            width: 80px;
            height: 80px;
            margin: 10px;
          }
          padding: 0;
          margin: 0;
          .goodnew {
            background: #fff;
            span {
              display: block;
            }
            span:nth-child(1) {
              font-size: 16px;
            }
            span:nth-child(2) {
              font-size: 12px;
              margin: 10px 0;
              color: #ccc;
            }
            span:nth-child(3) {
              font-size: 12px;
            }
          }
        }
      }
    }
    .goodyh {
      margin-left: 40px;
      height: 48px;
      span:nth-child(1) {
        color: #f2495e;
        font-size: 14px;
        font-weight: 700;
        margin-right: 10px;
      }
    }
  }
  .hot_title {
    text-align: center;
    margin-bottom: 30px;
    p:nth-child(1) {
      font-size: 22px;
      font-weight: 700;
      border-bottom: 2px solid #000;
      width: 188px;
      margin: 0 auto;
    }
    p:nth-child(2) {
      font-size: 16px;
      margin-top: 8px;
      font-weight: 700;
    }
  }
  .hot_box {
    display: flex;
    justify-content: space-around;
    div {
      width: 174px;
      margin: 10px;
      font-weight: 700;
      .hot_img {
        img {
          width: 158px;
        }
      }
    }
    .hot_plice {
      display: flex;
      justify-content: space-between;
      .cartImg {
        display: inline-block;
        width: 20px;
      }
      img {
        width: 20px;
      }
    }
  }
  .checkbox {
    background: #fff;
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: fixed;
    left: 0;
    bottom: 50px;
    height: 54px;
    .check_left {
      height: 54px;
      margin-left: 10px;
      font-size: 14px;
      display: flex;
      font-weight: 700;
      align-items: center;
      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
      a {
        margin-left: 10px;
        color: #000;
      }
    }
    .chexk_right {
      display: flex;
      width: 230px;
      justify-content: space-between;
      font-size: 14px;
      .cher-l {
        width: 110px;
        margin-right: 10px;
        padding-top: 10px;
        .chesum {
          font-weight: 700;
          color: #f2495e;
          font-size: 18px;
        }
      }
      button {
        border: none;
        flex: 1;
        background: #02d4d7;
        font-size: 20px;
        font-weight: 700;
        color: #fff;
      }
    }
  }
  .show {
    display: none;
  }
}
</style>
